<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名操作</title>
		<!-- 样式类名操作：针对css3、添加、移除、切换的元素"类名"操作
		     addClass()       有参：1个参和多个参
			                  语法：addClass("类名")
							  <p class="类名">
							  语法：addClass("类名1 类名2");
							  <p class="类名1 类名2">
							  功能：匹配元素集合中的所有元素
							       添加一个或多个类名操作
								理解：元素添加存在的样式
								   
			 removeClass()     功能：匹配元素集合中的所有元素
							       移除一个或多个类名操作
								
			 toggleClass()     功能：如果元素有类名移除，没有则添加 
			 
			 hasClass()         功能：检查匹配元素集合中是否包含指定类名
			                          返回值bool
		 -->
		
		  <script src="../js/jquery-1.11.1.js"></script>
		  <style>
			  .bgColor{
				  height: 300px;
				  width: 300px;
				  background-color: #ff5500;
			  }
			  .broder{
				  border: 10px solid #ff0;
				  border-radius: 50%;
			  }
		  </style>
	</head>
	<body>
		<div id="targetElement"></div>
		<button id="addClassBtn">添加类名</button>
		<button id="removeClassBtn">移除类名</button>
		<button id="toggleClassBtn">切换类名</button>
		<button id="hasClassBtn">检查类名是否存在</button>
		<div id="resultArea"></div>
		<script>
			//1.点击  添加类名 按钮 添加效果【样式】  300*300 背景色红色
			$("#addClassBtn").click(function(){
			//div添加样式--存在样式:类名
				$("#targetElement").addClass("bgColor broder");
				$("#resultArea").html("<h4>添加样式类名：bgColor</h4>");
			});
			//2.点击 添加类名 按钮 添加效果【样式】
			//     300*300 背景色红色 圆 外层 10px 黄色框
			$("#removeClassBtn").click(function(){
				$("#targetElement").removeClass("broder");
				$("#resultArea").html("<h4>移除样式类名：bgColor</h4>");
			});
			// 点击 切换类名  添加效果【样式】
			//     300*300 背景色红色 圆 外层 10px 黄色框
			$("#toggleClassBtn").click(function(){
				$("#targetElement").toggleClass("broder");
				$("#resultArea").html("<h4>切换样式类名：broder</h4>");
			});
			//6.检查类名是否存在：true存在   false不存在
			$("#hasClassBtn").click(function(){
				var hc=$("#targetElement").hasClass("broder");
				$("#resultArea").text("检查当前样式是否存在："+hc);
			});
		</script>
	</body>
</html>